<!-- 宣传引导页面 -->
<template>
  <div class="page">
    <div v-wechat-title="$route.meta.title"></div>

    <div class="page__bd">
      <div class="weui-cells">
        <a class="weui-cell  weui-cell_access weui-cell_example" href="javascript:" @click="toInfo(obj)"
           v-for="(obj,index) in items">
          <div class="weui-cell__hd">
            <img :src="obj.cover" alt="" style="width: 60px; margin-right: 16px; display: block;"></div>
          <div class="weui-cell__bd">
            <p v-text="obj.title.length > 13 ? obj.title.substring(0,13)+'...' : obj.title"></p>
            <p>
            <div class="weui-cell__ft" v-text="obj.publicTime.substring(0, 10)"></div>
            </p>
            <p><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">参与投票</a></p>
          </div>
        </a>
      </div>
    </div>

    <!--BEGIN toast-->
    <div id="infoToast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast"></i>
        <p class="weui-toast__content" id="weui-toast__content"></p>
      </div>
    </div>
    <!-- loading toast -->
    <div id="loadingToast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
    <!--end toast-->
  </div>
</template>
<script type="text/javascript">
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import {axiosContentType, apiPath, basePath} from '@/assets/js/boss'
  import 'weui'

  export default {
    data() {
      return {
        items: [],
        result: {},
        pageNum: 1
      }
    },
    mounted() {
      let that = this;
      that.page(1);

      let loading = false;  // 状态标记 这个变量主要是用来控制触发次数
      $(window).scroll(function () {
        if (loading) return;
        let scrollTop = Math.ceil($(this).scrollTop()) // 滚动条与顶部的高度
        let curHeight = $(this).height() // 当前可视页面高度
        let totalHeight = $(document).height() // 页面的总高度
        if (scrollTop + curHeight >= totalHeight) {
          if (that.pageNum < that.result.pageCount) { // 如果当前页小于总页面
            that.loading(); // 显示 加载中图标
            that.pageNum = that.pageNum + 1;
            that.page(that.pageNum);
          } else {
            that.showMsg('没有了');
          }
        }
      });
    },
    methods: {
      page(pageNum) {
        let that = this;
        let data = {type: 7};
        axios.post(apiPath + '/api/sys/sysNews/page/' + pageNum
          , JSON.stringify(data)
          , axiosContentType.json
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result.data;
            that.items = that.items.concat(result.data.data);
          } else {
            that.showMsg(result.message);
          }
        });
      },
      toInfo(item) {
        let appId = 'wx0625e481751f5be1'; // 公众号appId
        let url = encodeURIComponent(basePath + '/wechat/publicityDetail?id=' + item.id);
        let wechatUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + url +
          '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
        location.href = wechatUrl;
      },
      showMsg(msg) {
        let $toast = $('#infoToast');
        if ($toast.css('display') !== 'none') return;
        $('#weui-toast__content').empty().append(msg);
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 2000);
      },
      loading() {
        let $loadingToast = $('#loadingToast');
        $loadingToast.fadeIn(100);
        setTimeout(function () {
          $loadingToast.fadeOut(100);
        }, 2000);
      }
    }
  }
</script>
